// 引入路由 API
import { createRouter, createWebHashHistory } from "vue-router";

// 引入页面
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const Product = () => import("../views/Product.vue");
const NotFound = () => import("../views/404.vue");
const VuexPage = () => import("../views/Vuex.vue");
const VuexAliasPage = () => import("../views/VuexAlias.vue");
// 引入ElementTest 页
const ElementTest = () => import("../views/ElementTest.vue")
// 引入列表及分页页
const ListDemo = () => import("../views/ListDemo.vue")
// 引入Register
const Register = () => import("../views/Register.vue")

// 引入混合式API页面
const CompositionApiPage = () => import("../views/composition-api/Index.vue")

// 引入AccountList页
const AccountList = () => import("../views/AccountList.vue")

// 引入用户中心
const userCenter = () => import("../views/user-center/index.vue")
const userProfile = () => import("../views/user-center/Profile.vue")
const userSettings = () => import("../views/user-center/Settings.vue")


const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/product/:id',
        name: 'product',
        component: Product
    },
    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/user',
        name: 'user',
        component: userCenter,
        redirect: '/user/profile',
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: userProfile
            },
            {
                path: 'settings',
                name: 'settings',
                component: userSettings
            },
        ]
    },
    {
        path: '/vuex',
        name: 'vuex',
        component: VuexPage
    },
    {
        path: '/element',
        name: 'element',
        component: ElementTest
    },
    {
        path: '/list-demo',
        name: 'listDemo',
        component: ListDemo
    },
    {
        path: '/register',
        name: 'register',
        component: Register
    },
    {
        path: '/account-list',
        name: 'accountList',
        component: AccountList
    },
    {
        path: '/composition-api',
        name: 'compositionApi',
        component: CompositionApiPage
    },
    {
        path: '/vuex-alias',
        name: 'vuexAlias',
        component: VuexAliasPage
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'notFound',
        component: NotFound
    },
]



// 创建VueRouter实例并配置1
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
});

// router.beforeEach((to, from, next) => {
//     console.log('to', to);
//     console.log('from', from);

//     next()
// })

// router.afterEach((to, from) => {
//     console.log('afterEach====================');
//     console.log('to', to);
//     console.log('from', from);
// })

export default router